<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>页面转场 Page transitions-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile RC1版本中文站,Jquery mobile最新中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css"/>
<script type="text/javascript" src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />

<div class="content">
	<h1>页面转场 Page transitions</h1>
  <div class="desc"><strong></strong>
<div>Jquery Mobile框架内置了一套基于css的页面转场效果，你可以给任何通过ajax对象或页面添加。</div></div>
				<p class="indent"><strong>给链接添加data-transition属性，可以设定自定义的页面转场效果</strong></p>
				<div class="code">
				  <p>&lt;a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" <strong>data-transition="fade"</strong> data-inline="true"&gt;dialog&lt;/a&gt;</p>
				  <p>&lt;a href=&quot;page-transitions-dialog.html&quot; data-role=&quot;button&quot; data-rel=&quot;dialog&quot; <strong>data-transition=&quot;pop&quot;</strong> data-inline=&quot;true&quot;&gt;dialog&lt;/a&gt;</p>
				  &lt;a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" <strong>data-transition="flip"</strong> data-inline="true"&gt;dialog&lt;/a&gt;
				  <p>&lt;a href=&quot;page-transitions-dialog.html&quot; data-role=&quot;button&quot; data-rel=&quot;dialog&quot; <strong>data-transition=&quot;turn&quot; </strong>data-inline=&quot;true&quot;&gt;dialog&lt;/a&gt;</p>
				  <p>&lt;a href=&quot;page-transitions-dialog.html&quot; data-role=&quot;button&quot; data-rel=&quot;dialog&quot; <strong>data-transition=&quot;flow&quot;</strong> data-inline=&quot;true&quot;&gt;dialog&lt;/a&gt;</p>
				  <p>&lt;a href=&quot;page-transitions-dialog.html&quot; data-role=&quot;button&quot; data-rel=&quot;dialog&quot; <strong>data-transition=&quot;slidefade&quot;</strong> data-inline=&quot;true&quot;&gt;dialog&lt;/a&gt;<br>
			      &lt;a href=&quot;page-transitions-dialog.html&quot; data-role=&quot;button&quot; data-rel=&quot;dialog&quot; <strong>data-transition=&quot;slide&quot;</strong> data-inline=&quot;true&quot;&gt;dialog&lt;/a&gt;</p>
				  <p>&lt;a href=&quot;page-transitions-dialog.html&quot; data-role=&quot;button&quot; data-rel=&quot;dialog&quot; <strong>data-transition=&quot;slideup&quot;</strong> data-inline=&quot;true&quot;&gt;dialog&lt;/a&gt;</p>
				  <p>&lt;a href=&quot;page-transitions-dialog.html&quot; data-role=&quot;button&quot; data-rel=&quot;dialog&quot; <strong>data-transition=&quot;slidedown&quot;</strong> data-inline=&quot;true&quot;&gt;dialog&lt;/a&gt;</p>
				  <p>&lt;a href=&quot;page-transitions-dialog.html&quot; data-role=&quot;button&quot; data-rel=&quot;dialog&quot; <strong>data-transition=&quot;none&quot;</strong> data-inline=&quot;true&quot;&gt;dialog&lt;/a&gt;<br />
			      </p>
</div>
	
<p class="alert">
<strong>重要注意事项：</strong>有些移动平台目前对css3的transitions支持还有问题。我们目前正在想办法一劳永逸的解决这个问题。如果你的项目在页面转场的过程中或结束时有页面闪烁的问题，我们建议采用下面的方法。请注意在部署之前在目标的平台上进行彻底的测试。这个二房会造成一些性能上的问题，有可能会使部分浏览器崩溃，特别是安卓系统上的。此方法为加上下面的一段css....<br />
.ui-page { -webkit-backface-visibility: hidden; }<br />
再次提醒，测试要彻底
</p>
  <div class="desc">
<div><strong>只看到了淡入淡出的效果？ </strong>想要看到页面翻转的转场效果，浏览器必须支持3D transforms。默认情况下，不支持css3d的设备（必如安卓2.x）会退化为“淡入淡出”的转场效果。</div><br />
	<h1>给链接或者表单的提交添加转场效果</h1>
<div>默认情况下，Jquery Mobile应用的是从<strong>淡入淡出</strong>的转场效果。如果想要自定义转场特效，需要给链接添加<strong>“data-transition”</strong>属性</div>

	<div class="code">
		<p>&lt;a href=&quot;index.html&quot; <strong>data-transition=&quot;pop&quot;</strong>&gt;I'll pop&lt;/a&gt;</p>
</div>

<div>当后退按钮按下时，框架会自动使用“后退”转场效果退到上一个页面，如果想强制给转场应用“后退”的转场效果，可以链接添加<br>
  <strong>data-direction="reverse" </strong></div>
	<h1>页面转场的全局设置</h1>
   
<div>如果你想给全局设置一个不一样的默认转场效果，可以设置<strong>defaultPageTransition</strong>。如果想把对话框的popup默认效果设置为一个不一样的话，则需要设置<strong>defaultDialogTransition</strong>。</div>
	<h1>浏览器的支持和表现</h1>
<div>jquery mobile中所有的动画都是通过css的关键帧动画技术实现的，并且包含了<strong>-webkit</strong>的前缀来针对iOS, Blackberry, Android, Safari 和 Chrome浏览器，以及 <strong>-moz</strong>前缀来针对火狐浏览器，是否支持css的关键帧动画技术取决于浏览器的版本和 移动设备的硬件，如果不支持的话，转场会安全地退化为无动画的效果，</div>
	<h1>为不支持3D转场的情况 定义 平稳退化的 转场效果</h1>
<div>默认情况下，除了淡入淡出外所有转场都需要3D支持。如果设备不支持的话，转场会安全地退化为淡入淡出效果。我们这样做是想主动地排除像Android 2.x那样表现不佳的平台，并确保他们仍然有一个流畅的体验。但是Android 3.0支持3D变换，，但仍然表现不佳（闪屏？），所以我们不能保证每个浏览器都表现良好。</div>
<div>所以可以给每种转场效果都设置一个备选的转场，以备浏览器不支持的情况，默认情况下指定的为“fade”,例如，下面的代码可以将slideout的转场设置为“无”</div>
</div>
	<div class="code">
		<p>$.mobile.transitionFallbacks.slideout = &quot;none&quot;</p>
</div>
	<h1>设置转场的最大宽度</h1>
  <div class="desc">
<div>默认情况下，当窗口宽度大于一定值的时候，转场效果可能会被关闭。因为转场效果会消耗系统资源，所以屏幕太宽的时候表现可能会不佳。通过<strong>$.mobile.maxTransitionWidth</strong>可以设置这个宽度，默认情况下值为false。它也接受一个数字，代表能够发生转场效果的最大宽度。</div>
	<h1>创建自定义的基于css的转场效果</h1>
	<div><a href="custom.html" tppabs="http://www.jqmapi.com/componts/page/custom.html">jQuery Mobile允许自定义页面转场，具体请查看</a></div>
</div>
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



